<script lang="ts" setup>
import {onMounted, reactive, ref, watch} from 'vue'
import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
import ImgUploader from "@/components/common/imgUploader.vue";
import type {enterpriseType} from "@/utils/type";
import {ElMessage} from "element-plus";
import {
  createEnterpriseApi,
  editEnterpriseApi,
  getEnterpriseInfoApi,
  type params4createEnterpriseApi
} from "@/api/path/enterpriseApis";
import MyButton from "@/components/common/myButton.vue";
import {enterpriseClass} from "@/utils/constant";
import {useRouter, useRoute} from "vue-router";
import {getObj} from "@/utils/obs";

const router = useRouter();
const route = useRoute();
const props = defineProps({
  title: {
    type: String,
    required: false,
    default: '创建企业',
  },
  id: {
    type: String,
    required: false,
  }
});
const enterpriseId = ref();
const formData = reactive<enterpriseType>({
  enterpriseName: '',
  enterpriseIntro: '',
  enterpriseImgKey: '',
  enterpriseClass: '',
  enterpriseContactWay: '',
})
const imgSrc = ref();
const getEnterpriseInfo = (id: number) => {
  getEnterpriseInfoApi(id).then(res => {
    if (res.success) {
      formData.enterpriseName = res.name;
      formData.enterpriseIntro = res.intro;
      formData.enterpriseContactWay = res.contactWay;
      getObj(res.imageKey, imgSrc);
      formData.enterpriseClass = res.class;
      formData.followerNum = res.followCount;
    }
    else {
      ElMessage.error(res.msg);
    }
  })
}
watch(() => props, (newValue, oldValue) => {
  enterpriseId.value = newValue.id;
  if (enterpriseId.value) {
    getEnterpriseInfo(enterpriseId.value);
  }
}, {deep: true, immediate: true});
const formSize = ref<ComponentSize>('default')
const ruleFormRef = ref<FormInstance>()
// TODO: 这个地方是不是改成从后端获取比较好
const classOptions = enterpriseClass;
const rules = reactive<FormRules<enterpriseType>>({
  enterpriseName: [{required: true, message: '请输入企业名', trigger: 'change'}],
  enterpriseIntro: [{required: true, message: '请输入企业简介', trigger: 'change'}],
  enterpriseClass: [{required: true, message: '请输入企业行业', trigger: 'change'}],
  enterpriseImgKey: [{required: false, message: '请上传企业图片', trigger: 'change'}],
  enterpriseContactWay: [{required: false, message: '请输入企业联系方式', trigger: 'change'}],
})
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      const param : params4createEnterpriseApi = {
        enterpriseId: enterpriseId.value,
        enterpriseName: formData.enterpriseName,
        enterpriseIntro: formData.enterpriseIntro,
        enterpriseClass: formData.enterpriseClass,
        enterpriseImgKey: formData.enterpriseImgKey,
        enterpriseContactWay: formData.enterpriseContactWay,
      }
      let func;
      if (enterpriseId.value) {
        func = editEnterpriseApi;
      }
      else {
        func = createEnterpriseApi;
      }
      func(param).then(res => {
        if (res.success) {
          router.push({
            path: '/enterprise',
            query: {
              enterpriseId: res.enterpriseId ? res.enterpriseId : enterpriseId.value,
            }
          })
        }
        else ElMessage.error(res.msg)
      })
    } else {
      ElMessage.error('error submit!', fields)
    }
  })
}
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
  router.push('/');
}
const handleReceiveKey = (key: string) => {
  formData.enterpriseImgKey = key;
}
</script>

<template>
  <span class="create-enterprise-wrapper">
    <span class="title">
      {{props.title}}
    </span>
    <span class="content-wrapper">
      <el-form
          ref="ruleFormRef"
          style="max-width: 600px"
          :model="formData"
          :rules="rules"
          label-width="auto"
          class="demo-ruleForm"
          :size="formSize"
          status-icon
      >
        <el-form-item label="企业名称" prop="enterpriseName">
          <el-input style="width: 400px" v-model="formData.enterpriseName"/>
        </el-form-item>
        <el-form-item label="企业简介" prop="enterpriseIntro">
          <el-input style="width: 400px" v-model="formData.enterpriseIntro"></el-input>
        </el-form-item>
        <el-form-item label="企业行业" prop="enterpriseClass">
<!--          <el-select-->
<!--              v-model="formData.enterpriseClass"-->
<!--              multiple-->
<!--              filterable-->
<!--              allow-create-->
<!--              default-first-option-->
<!--              :reserve-keyword="false"-->
<!--              placeholder="请选择您企业所属的行业"-->
<!--              style="width: 400px"-->
<!--          >-->
            <el-select
              v-model="formData.enterpriseClass"
              placeholder="请选择您企业所属的行业"
              style="width: 400px"
          >
            <el-option
                v-for="item in classOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="企业联系方式" prop="enterpriseContactWay">
          <el-input style="width: 400px" v-model="formData.enterpriseContactWay"></el-input>
        </el-form-item>
        <el-form-item label="企业图片" prop="enterpriseImgKey">
          <img-uploader :init-img-src="imgSrc" :img-width="300" :img-height="300" @emit-img-src="handleReceiveKey"></img-uploader>
        </el-form-item>
      </el-form>
      <span class="btn-group">
        <my-button type="primary" :width="100" :height="35" @click="submitForm(ruleFormRef)">
          确认
        </my-button>
        <my-button type="light" :width="100" :height="35" @click="resetForm(ruleFormRef)">
          取消
        </my-button>
      </span>
    </span>
  </span>
</template>

<style scoped>
.create-enterprise-wrapper {
  display: flex;
  flex-direction: column;
  /*width: 500px;*/
  /*padding: 0 50px;*/
  margin: 30px;
  border-radius: 15px;
  background-color: white;
  border: 2px solid var(--color-plain);
  .title {
    padding: 20px 0 0 30px;
    font-size: var(--font-size-large);
  }
  .content-wrapper {
    padding: 10px 50px 30px 50px;
    display: flex;
    height: 100%;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    .btn-group {
      display: flex;
      width: 240px;
      justify-content: space-between;
      /*&:deep(.el-button){*/
      /*  background-color: var(--color-light);*/
      /*  border: 1px solid var(--color-plain);*/
      /*  &.el-button--primary {*/
      /*    background-color: var(--color-primary);*/
      /*    border: none;*/
      /*  }*/
      /*  &:hover {*/
      /*    background-color: var(--color-plain);*/
      /*    color: var(--color-primary);*/
      /*    outline: none;*/
      /*  }*/
      /*}*/
    }
  }
}
:deep(.el-form-item__label) {
  font-size: var(--font-size-base);
}
</style>

